<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('group.commentList')}}</block>
		</cu-custom>
		<view class="grid gap margin-ht" style="margin-top:25rpx;">
			<view class="flex flex-direction padding bg-white radius-sm" v-for="(item,index) in dataList" :key="index">
				<view class="flex align-center">
					<image :src="helper.handleImage(item.avatar)" style="width: 90rpx;height: 90rpx;"
						class="round flex-shrink">
					</image>
					<view class="flex flex-direction margin-left-sm flex-sub">
						<view class="flex align-center justify-between ">
							<text class="font-400 text-black" style="font-size: 30rpx">{{item.nickname}}</text>
							<u-rate :count="5" v-model="item.score" readonly activeColor="#F4AA2A" gutter="1"
								size="16" />
						</view>
						<text
							class="font-400 text-gray text-sm margin-top-xs">{{item.createtime | handleDateTime('YYYY-MM-DD')}}</text>
					</view>
				</view>
				<text class="text-df font-400 text-black padding-top-sm">{{item.remark}}</text>
			</view>
			<section class="empty" v-if="!dataList.length">
				<u-empty mode="list" :text="$t('list.empty')" />
			</section>
		</view>
	</view>
</template>

<script>
	import {
		goodsCommentLists
	} from '@/apis'
	export default {
		data() {
			return {
				star: 3,
				id: null,
				page: 1,
				dataList: []
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.page = 1
			this.dataList = []
			this.goodsCommentLists()
		},
		onReachBottom() {
			this.page++
			this.goodsCommentLists()
		},
		methods: {
			async goodsCommentLists() {
				const res = await goodsCommentLists({
					page: this.page,
					goods_id: this.id
				})
				this.dataList = this.dataList.concat(...res.data)
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>